<template>
  <div class="captcha-message" v-if="isCom" @click.self="closeMes">
      <div class="c-m-container" >
        <div class="c-m-header">验证码</div>
            <div class="img-container">
                <div>
                     <img @click="redown" :src="url" @load="delTime" alt="">
                </div>
                <div class="i-c-text">
                  <span class="redo"  @click="redown" >刷新 </span><span>({{numRef > 0 ?`${numRef}`:'验证码已过期'}})</span>
                </div>
            </div>
            <div>
                <input class="c-m-input" placeholder="请输入正确的验证码" type="text" v-model="val">
                <span v-if="rIs" class="err alter ">{{resultErr}}</span>
                <span class="alter" v-else>可点击图片、刷新</span>
            </div>
            <div class="but-container">
                <button class="close" @click="closeMes">取消</button>
                <button class="submit"  @click="subimt">确定</button> 

            </div>
      </div>
  </div>
</template>

<script>
import {baseUrl,apiCaptcha} from '../../config';
import { ref,onBeforeMount,computed} from 'vue';
import {rIs,resultErr} from '../../compostion/useRef'
export default {
    props:{
        isShow:{
            type:Boolean,
            defaul:false
        },
       
    },
    setup(p,cxt){
        const numRef = ref(59);
        let time = null; 
        const id = ref(0);
        const val = ref('');
        
        const random = ()=>{
            return Math.random().toString(16).substr(2) + Math.random().toString(16).substr(2);
        }
        const redown = ()=>{
            id.value = random();
            numRef.value = 59;
            val.value = '';
        }
        const isCom = computed(()=>{
            redown()
            return p.isShow 
        })
         const url = computed(()=>{
             return baseUrl+apiCaptcha+'?id='+id.value
         })
        const subimt = ()=>{
            if('' === val.value) return;
            if(resultErr.value === "请勿频繁提交"){
                
                rIs.value = true;
                return
                };
            if(numRef.value <= 0) {
                redown();
                return;
            }
            cxt.emit("captchaResult",{
                id:id.value,
                text:val.value
            });
        }
        const delTime = ()=>{ //图片加载完触发
            clearInterval(time);
            stetim();
        }

        const closeMes = ()=>{
            val.value = '';
            cxt.emit("closeMes",false); 
        }
        const stetim = ()=>{

            time = setInterval(() => {
                
                numRef.value --;
                if(numRef.value <= 0) clearInterval(time);

            }, 1000);
        }
        
        onBeforeMount(()=>{
            id.value = random()
        })


      

        return {
            numRef,
            redown,
            isCom,
            id,
            url,
            val,
            subimt,
            delTime,
            closeMes,
            rIs,
            resultErr,

        }
    }


}
</script>

<style lang="less" scoped>
.captcha-message{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.09);
    z-index: 999;
    top: 0;
    left: 0;
    cursor: pointer;
    .c-m-container{
        background: #fff;
        width: 350px;
        height: 250px;
        position: relative;
        top: calc(50% - 125px);
        left: calc(50% - 175px);
        border-radius: 5px;
        box-shadow: 1px 1px 0px #bebcbc,
                    -1px -1px 0px #c2c0c0;
        cursor:default;
        .c-m-header{
        height: 50px;
        width: 100%;
        text-align: center;
        font-size: 19px;
        font-weight: 700;
        }
        .img-container{
            display:flex;
            justify-content: center;
            overflow: hidden;
            img{
                margin: 0 0 0 10px;
                cursor: pointer;
            }
            div{
                width: 50%;
            }
            .redo{
                text-align: center;
                cursor: pointer;
                color: blue;
            }
            .i-c-text{
                line-height: 60px;
            }
        }
        .c-m-input{
            height: 25px;
            margin: 0 0 10px 10px;
        }
        .but-container{
            display: flex;
            justify-content: center;
            padding:10px;

        }
        .err{
            color: red;
        }
        .alter{
            padding: 0 0 0 10px;
        }
    }

}
.submit{
    background: #409eff;
    color: #fff;
    border: 1px solid #409eff;
}
.close{
    background: #fff;
    color:#606266 ;
    border: 1px solid #dcdfe6;
}
.close,.submit{
    cursor: pointer;
    padding: 10px 20px;
    margin: 0 10px 0 10px;
    border-radius: 3px;



}
</style>